@import "~terriajs-variables";
@import "../../Sass/common/mixins";

@include empty-module("tabs");

.tab-list {
  composes: list-reset from "../../Sass/common/_base.scss";
  composes: clearfix from "../../Sass/common/_base.scss";
  padding-right: 100px;
  background: $color-primary;
  border-radius: 3px 3px 0 0;
}

.tab-list__item {
  display: inline-block;
  float: left;
}

.tab-panel {
  width: 100%;
  height: $modal-content-height;

  &:focus {
    outline: none;
  }
}

.panel-content {
  composes: clearfix from "../../Sass/common/_base.scss";
  position: relative;
  background: $modal-bg;
  color: $modal-text;
  border-top: 1px solid $grey-lighter;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
}

.tab-left-col {
  @media (min-width: $sm) {
    width: 40%;
    float: left;
    height: 100%;
    padding: 0 $padding-small;
    background: $modal-secondary-bg;
    display: flex;
    flex-direction: column;
    form {
      margin: $padding 0;
    }
  }
}

:global {
  .data-explorer,
  .my-data {
    @media (min-width: $sm) {
      width: 40%;
      float: left;
      height: 100%;
    }
  }
}

// Modal window tab buttons

.btn--tab {
  composes: btn from "../../Sass/common/_buttons.scss";
  background: transparent;
  color: $text-light;
  font-size: $font-size-mid-small;
  padding: $padding-small;
  margin: $padding;
  border-radius: 3px;

  &:hover,
  &:focus {
    background: $text-light;
    @if variable-exists(modal-selected) {
      color: $modal-selected;
    } @else {
      color: $color-primary;
    }
  }
}

.btn--selected {
  background: $text-light;
  @if variable-exists(modal-selected) {
    color: $modal-selected;
  } @else {
    color: $color-primary;
  }
}
